<template>
	<view class="modal-overlay" v-if="visible" @click="handleClose">
		<view class="modal-content" @click.stop>
			<!-- 渐变顶部条 -->
			<view class="modal-top-bar"></view>
			
			<!-- 成绩单标题 -->
			<view class="modal-header">
				<text class="modal-title">成绩单</text>
				<view class="info-icon">ⓘ</view>
				<view class="close-btn" @click="handleClose">✕</view>
			</view>
			
			<!-- 成绩表格 -->
			<view class="grade-table">
				<!-- 表格头部 -->
				<view class="table-header">
					<view class="header-cell subject">科目</view>
					<view class="header-cell score">分数</view>
					<view class="header-cell grade-rank">年级排名</view>
					<view class="header-cell class-rank">班级排名</view>
					<view class="header-cell action">操作</view>
				</view>
				
				<!-- 成绩列表 -->
				<view class="grade-list">
					<view class="grade-row" v-for="grade in gradeData" :key="grade.subject">
						<view class="grade-cell subject">
							<text class="subject-name">{{ grade.subject }}</text>
						</view>
						<view class="grade-cell score">
							<text class="score-text">{{ grade.score }}</text>
						</view>
						<view class="grade-cell grade-rank">
							<text class="rank-text">{{ grade.gradeRank }}</text>
						</view>
						<view class="grade-cell class-rank">
							<text class="rank-text">{{ grade.classRank }}</text>
						</view>
						<view class="grade-cell action">
							<text class="action-btn" @click="handleViewAnswers(grade)">答题卡 ></text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部指示器 -->
			<view class="modal-bottom-indicator"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GradeReportModal',
	props: {
		// 弹窗是否显示
		visible: {
			type: Boolean,
			default: false
		},
		// 学生信息
		studentInfo: {
			type: Object,
			default: () => ({
				name: '',
				id: ''
			})
		},
		// 成绩数据
		gradeData: {
			type: Array,
			default: () => [
				{ subject: '英语', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '语文', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '数学', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '历史', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '化学', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '政治', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '生物', score: '400', gradeRank: '5', classRank: '1' }
			]
		}
	},
	methods: {
		handleClose() {
			this.$emit('close');
		},
		handleViewAnswers(grade) {
			console.log('查看答题卡:', grade.subject);
			this.$emit('view-answers', grade);
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #F0F0F0;

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;

	.modal-content {
		width: 100%;
		background: @white;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0;
		position: relative;
		animation: slideUp 0.3s ease-out;
		max-height: 80vh;
		overflow: hidden;

		.modal-top-bar {
			height: 8rpx;
			background: linear-gradient(90deg, @primary-color 0%, @secondary-color 100%);
			border-radius: 24rpx 24rpx 0 0;
		}

		.modal-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx 20rpx;
			position: relative;

			.modal-title {
				font-size: 32rpx;
				font-weight: bold;
				color: @text-color;
				flex: 1;
			}

			.info-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				background: #e0e0e0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
				color: @text-light;
				margin-right: 20rpx;
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: @text-lighter;
				font-size: 32rpx;
			}
		}

		.grade-table {
			padding: 0 30rpx;
			max-height: 60vh;
			overflow-y: auto;

			.table-header {
				display: flex;
				align-items: center;
				padding: 16rpx 0;
				border-bottom: 1rpx solid @border-color;
				margin-bottom: 12rpx;
				background: @white;
				position: sticky;
				top: 0;
				z-index: 10;

				.header-cell {
					font-size: 24rpx;
					color: @text-light;
					font-weight: 500;
					text-align: center;

					&.subject {
						flex: 1;
						text-align: left;
					}

					&.score {
						flex: 0.8;
					}

					&.grade-rank {
						flex: 1;
					}

					&.class-rank {
						flex: 1;
					}

					&.action {
						flex: 1.2;
					}
				}
			}

			.grade-list {
				.grade-row {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #f8f8f8;

					&:last-child {
						border-bottom: none;
					}

					.grade-cell {
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;

						&.subject {
							flex: 1;
							justify-content: flex-start;

							.subject-name {
								color: @text-color;
								font-weight: 500;
							}
						}

						&.score {
							flex: 0.8;

							.score-text {
								color: @text-color;
								font-weight: 500;
							}
						}

						&.grade-rank, &.class-rank {
							flex: 1;

							.rank-text {
								color: @text-color;
							}
						}

						&.action {
							flex: 1.2;

							.action-btn {
								color: @primary-color;
								font-size: 24rpx;
								cursor: pointer;
								transition: all 0.2s;

								&:active {
									opacity: 0.7;
								}
							}
						}
					}
				}
			}
		}

		.modal-bottom-indicator {
			width: 200rpx;
			height: 8rpx;
			background: #e0e0e0;
			border-radius: 4rpx;
			margin: 30rpx auto 20rpx;
		}
	}
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
</style>
